import React, { Component } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { List, Avatar } from 'antd';
import styles from './EInteraction.less';

@connect(({ toolsModels }) => ({
  questionList: toolsModels.questionList,
  replyList: toolsModels.replyList,
}))
class EInteraction extends Component {
  state = {
    page_num: 1,
    tabSelected: 1,
  };

  updateInteractionList(type) {
    const { dispatch } = this.props;
    dispatch({
      type: 'toolsModels/queryInteractionList',
      payload: {
        page_num: this.state.page_num,
        page_size: 20,
        type: type,
      },
    });
  }

  componentDidMount() {
    this.setState({ loading: false });
    this.updateInteractionList('question');
    this.updateInteractionList('reply');
  }

  render() {
    let { questionList, replyList } = this.props;

    let handleStockChange = value => {
      this.setState(
        {
          stockName: value.split('(')[0],
          stockCode: value.split('(')[1].split(')')[0],
        },
        () => {
          this.updateMarginTrading();
        }
      );
    };

    const loginInfo = JSON.parse(window.sessionStorage.getItem('LOGIN_INFO'));

    return (
      <div className={styles.outerWidthLim}>
        <div className={styles.breadCrumbContainer}>
          <Link to="/Tools/MarketAnalysis">
            <div className={styles.breadCrumbButton}>融资融券统计与查询</div>
          </Link>
          <Link to="/Tools/EInteraction">
            <div className={styles.breadCrumbButton + ' ' + styles.breadCrumbButtonActive}>
              互动易统计
            </div>
          </Link>
          <Link to="/Tools/WebsiteList">
            <div className={styles.breadCrumbButton}>常用网站</div>
          </Link>
        </div>
        <div className={styles.mainContentContainer}>
          <div className={styles.messageLine}>
            <div className={styles.halfWidth}>未回复消息({questionList.total_count}条)</div>
            <div className={styles.halfWidth}>已回复消息({replyList.total_count}条)</div>
          </div>
          <div className={styles.tabLine}>
            <div
              onClick={() => this.setState({ tabSelected: 1 })}
              className={
                styles.tabButton +
                (this.state.tabSelected === 1 ? ' ' + styles.tabButtonSelected : '')
              }
            >
              最新提问
            </div>
            <div
              onClick={() => this.setState({ tabSelected: 2 })}
              className={
                styles.tabButton +
                (this.state.tabSelected === 2 ? ' ' + styles.tabButtonSelected : '')
              }
            >
              最新答复
            </div>
          </div>
          <div>
            <List
              itemLayout="horizontal"
              dataSource={
                this.state.tabSelected === 1 ? questionList.data_list : replyList.data_list
              }
              pagination={{
                defaultCurrent: 1,
                pageSize: 20,
                total:
                  this.state.tabSelected === 1 ? questionList.total_count : replyList.total_count,
                onChange: (page, pageSize) => {
                  this.setState({ page_num: page }, () => {
                    this.updateInteractionList(this.state.tabSelected === 1 ? 'question' : 'reply');
                  });
                },
              }}
              renderItem={item => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      <div style={{ textAlign: 'center', width: '95px', padding: '20px 0px' }}>
                        <Avatar
                          style={{ width: '40px', height: '40px' }}
                          src={require('./images/BaseUser.png')}
                        />
                        <div style={{ fontSize: '12px', marginTop: '5px' }}>
                          {this.state.tabSelected === 1 ? loginInfo.stock_name : item.user_name}
                        </div>
                      </div>
                    }
                    title={<div style={{ marginTop: '20px' }}>{item.question_time}</div>}
                    description={
                      <div>
                        问：
                        <span style={{ fontWeight: 'bold', color: 'rgb(21, 20, 21)' }}>
                          {item.question_content}
                        </span>
                        {this.state.tabSelected === 1 ? (
                          ''
                        ) : (
                          <div className={styles.replyBox}>
                            <span>{loginInfo.stock_name}：</span>
                            <span className={styles.stressFont}>{item.reply_content}</span>
                            <div style={{ marginTop: '10px' }}>{item.reply_time}</div>
                          </div>
                        )}
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default EInteraction;
